<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>作者管理</title>
    <script id="header" type="text/javascript" src="../js/header.js?head=../"></script>
    <style>
        #authorC{
            width:200px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .textTu{
            width: 476px;
            height: 100px;
        }

    </style>
</head>
<body>
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>
    作者管理 <a class="btn btn-success radius r mr-20"
            style="line-height: 1.6em; margin-top: 3px"
            href="javascript:location.replace(location.href);" title="刷新"><i
                class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="pd-20">
    <div class="text-c">
        <table class="searchTable">
            <tr>
                <td>
                    <div class="col-xs-6">
                        <div class="col-xs-6">
                            <label for="search">
                                <input type="text" class="input-text size-L" id="search" name="search" placeholder="请输入">
                            </label>
                        </div>
                        <div class="col-xs-2">
                            <input type="button" class="btn btn-secondary radius size-L" value="搜索" onclick="searchData()">
                        </div>
                    </div>
                </td>
                <td height="20" style="width: 100px;">
                    <a id="importBtn" href="javascript:showImport()" class="btn btn-success size-S radius">
                    <i class="Hui-iconfont Hui-iconfont-upload"></i> 导入</a>
                </td>
                <td height="20" style="width: 100px;">
                    <a id="outportBtn" href="../dataAuthor/outportAuthorExcel" class="btn btn-success size-S radius">
                        <i class="Hui-iconfont Hui-iconfont-upload"></i> 导出</a>
                </td>
            </tr>
        </table>
    </div>
    <div class="cl pd-5 bg-1 bk-gray">
			<span class="l"> <a href="javascript:;"
                                onclick="javascript:add();" id="saveData"
                                class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i>新增</a>
				<a href="javascript:;" onclick="bathDelete();" id="deleteData"
                   class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i>
					批量删除</a>
			</span>
    </div>
    <div class="mt-20">
        <table class="table table-border table-bordered table-hover table-bg table-sort" id="main">
            <thead>
            <tr class="text-c">
                <th width="25"><input type="checkbox" name="" value=""></th>
                <th width="50">ID</th>
                <th width="100">作者名字</th>
                <th width="100">作者介绍</th>
                <th width="100">创建者</th>
                <th width="100">创建时间</th>
                <th width="100">更新者</th>
                <th width="100">更新时间</th>
                <th width="140">操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<div id="formShow" class="pd-20" style="display: none;">
    <form action="" method="post" class="form form-horizontal"
          id="submitForm">
        <div class="row cl">
            <input id="id" name="id" style="display: none;" /> <input
                    id="dataType" name="dataType" style="display: none;" /> <label
                    class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>作者名字：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="input-text" value="" placeholder=""
                       id="authorName" name="authorName" required>
            </div>
            <label class="form-label col-xs-2 col-sm-2"><span
                        class="c-red">*</span>作者介绍：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <textarea class="textTu" value="" placeholder=""
                id="authorIntroduce" name="authorIntroduce"></textarea>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span
                        class="c-red">*</span>创建者：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="input-text" value="" placeholder=""
                       id="createBy" name="createBy" required>
            </div>
            <label class="form-label col-xs-2 col-sm-2"><span
                        class="c-red">*</span>更新者：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="input-text" value="" placeholder=""
                       id="updateBy" name="updateBy" required>
            </div>
        </div>
        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" id="submit" type="submit"
                       value="提交">
            </div>
        </div>
    </form>
</div>

<!--上传文件框-->
<div class="pd-20" id="import" style="display: none;">
    <form class="Huiform" method="post" action="" target="_self" id="dataFrom" style="margin-top: 8%">
        <a href="../model/村点订单数据导入模板.xlsx" class="btn btn-primary radius" style="margin-left: 20%"><i
                    class="Hui-iconfont">&#xe641;</i>下载模板</a>
        <span style="padding-left: 10px" class="btn-upload form-group">
                <input class="input-text upload-url radius size-S " type="text" name="uploadfile-2"
                       enctype="multipart/form-data"
                       id="uploadfile-2" readonly="readonly"
                       style="width:200px" placeholder="选择导入excel文件"/>
                <input type="file" multiple name="file-2" class="input-file"/>
         </span>
        <input class="btn btn-success size-S radius" type="button" value="导入" onclick="importExcel()">
    </form>
</div>
<script type="text/javascript">
    var base = "../dataAuthor/";
    var findPage = "findAuthorByPage";
    var findOne = "findAuthorOne";
    var updateData = "updataAuthor";
    var deleteData = "delAuthor";
    var saveData = "addAuthor";
    var findAuthorLike= "findAuthorLike";
    var importOrderData="importAuthorExcel";
    var pageUrl = base + findPage;
    var editUrl = base + findOne;
    var updateUrl = base + updateData;
    var addUrl = base + saveData;
    var deleteUrl = base + deleteData;
    var importUrl= base + importOrderData;
    var pageSize = 7;
    var dataTable;
    $(function() {
        dataTable = MyDataTable({
            id : "main",
            pageUrl : pageUrl,
            param : function() {
                 var p={"searchAuthor":$('#search').val()};
                 return p;
            },
            "columns" : [
                {
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        return '<td><input name="" type="checkbox" value="'+full.id+'"></td>';
                    }
                },{
                    "data" : "id",
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        if (data) {
                            return data;
                        }
                        return "";
                    }
                },

                {
                    "data" : "authorName",
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        if (data) {
                            return data;
                        }
                        return "";
                    }
                },
                {
                    "data" : "authorIntroduce",
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        if (data) {
                            return `
                                <div id="authorC" title="${data}">${data}</div>
                            `;
                        }
                        return "";
                    }
                },
                {
                    "data" : "createBy",
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        if (data) {
                            return data;
                        }
                        return "";
                    }
                },
                {
                    "data" : "createTime",
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        if (data) {
                            return data;
                        }
                        return "";
                    }
                },
                {
                    "data" : "updateBy",
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        console.log(data)
                        if (data) {
                            return data;
                        }
                        return "";
                    }
                },
                {
                    "data" : "updateTime",
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        if (data) {
                            return data;
                        }
                        return "";
                    }
                },
                {
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        return "<a class="
                            + updateData
                            + "  title = '修改' onclick='edit(\""
                            + full.id
                            + "\");'><i class='Hui-iconfont'>&#xe6df;</i></a>"
                            + "&#12288;<a  class="
                            + deleteData
                            + "  title = '删除' onclick='deletePlat(\""
                            + full.id
                            + "\");'><i class='Hui-iconfont'>&#xe6e2;</i></a>";
                    }
                } ]
        });

    });

    function bathDelete() {
        var ids = [];
        $("#main input:checked").each(function(i) {
            if ($(this).val() != '') {
                ids.push($(this).val());
            }
        });
        if (ids.length == 0) {
            layer.msg("至少选择一行进行操作!");
            return;
        }
        deletePlat(ids.join(","));

    };

    //Enter事件  触发
    $('#searchLike').keydown(function(){
        if(event.keyCode == 13){   //enter键值为13
            searchData()
        }
    });

    function deletePlat(ids) {
        layer.confirm('你真的要删除勾选的行?', function(index) {
            layer.load();
            layer.close(index);
            $.ajax({
                url : deleteUrl,
                type : 'get',
                datatype : 'json',
                data : {
                    "ids" : ids
                },
                success : function(result) {
                    if (result.code==200) {
                        layer.msg(result.msg);
                        searchData();
                    } else {
                        layer.msg(result.msg);
                    }
                }
            });
        });
    }
    function searchData() {
        dataTable.ajax.reload(null, false);
    };

    /**
     * 清空表单信息
     */
    function clearFrom() {
        $('#submitForm')[0].reset();
    };

    /**
     * 编辑用户
     * @param id
     */
    function edit(id) {
        clearFrom();
        var form = $("#submitForm");
        //设置表单提交 地址
        form.attr("action", updateUrl);
        $.ajax({
            url : editUrl,
            type : 'get',
            datatype : 'json',
            data : {
                "id" : id
            },
            success : function(result) {
                layer.closeAll();
                $('#formShow').show();
                layer.open({
                    title : '修改',
                    type : 1,
                    area : [ '80%', '60%' ], //宽高s
                    content : $('#formShow')
                });
                //填充表单信息
                for ( var d in result) {
                    var $obj = $("#" + d);
                    if ($obj.length > 0) {
                        var tagName = $obj[0].tagName;
                        if (tagName == "IMG") {
                            $obj.attr("src", "" + result[d] + "");
                        } else {
                            $obj.val(result[d] + "");
                        }
                    }
                }
            }
        });
    };
    /**
     * 提交表单
     */
    function submitFrom() {
        var form = $("#submitForm");
        layer.load();
        var options = {
            type : 'post',
            success : function(data) {
                layer.closeAll();
                if (data.code==200) {
                    searchData();
                } else {
                    layer.msg(data.msg);
                }
            }
        };
        form.ajaxSubmit(options);
    };

    $("#submitForm").validate({
        rules : {
            nickname : {
                required : true
            },
        },
        onkeyup : false,
        focusCleanup : true,
        success : "valid",
        submitHandler : function(form) {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            submitFrom();
        }
    });


    function add() {
        clearFrom();
        var form = $("#submitForm");
        form.attr("action", addUrl);
        $('#formShow').show();
        layer.open({
            title : '添加',
            type : 1,
            area : [ '80%', '60%' ], //宽高s
            content : $('#formShow')
        });
    };
    //显示导入表单
    function showImport() {
        $('#import').show();
        layer.open({
            type: 1,
            area: ['50%', '50%'], //宽高s
            content: $('#import'),
            title: "导入文件",
            zIndex: 666
        });
    }
    function showMask() {
        $("#mask").css("height", $(document).height());
        $("#mask").css("width", $(document).width());
        $("#mask").show();
    }
    //导入excel
    function importExcel() {
        showMask();
        $('#dataFrom').attr("action", importUrl);
        //验证上传文件
        var filepath = $('#uploadfile-2').val();
        var start = filepath.lastIndexOf(".");
        if (start == -1) {
            layer.msg("文件为空");
            hideMask();
            return
        }
        var ext = filepath.substring(start, filepath.length).toUpperCase();
        if (ext != ".XLSX" && ext != ".XLS") {
            layer.msg("文件格式不正确");
            hideMask();
            return;
        }
        var option = {
            success: function (result) {
                hideMask();
                if (result.isSuccess) {
                    layer.msg("文件导入成功啦");
                    dataTable.ajax.reload();
                } else {
                    layer.msg(result.msg);
                }
            }
        };
        $('#dataFrom').ajaxSubmit(option);
    }
</script>
</body>
</html>